iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

Angular 學習雜記系列 第 21

Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十)

  • 分享至 

  • xImage
  •  

在之前的章節中,有提到要先介紹如何呼叫web API之前,我們可以先透過Angular的模擬資料伺服器機制,來測試HttpClient程式是否正確。

而Angular有提供一個模擬資料伺服器機制,讓我們用陣列物件的方式,來設定資料表的物件,來做查詢、列表、新增、更新、刪除等功能。而這個機制,在Angular,稱為「記憶體Web API(In-memory Web API)」來模擬出的遠端資料伺服器通訊。

安裝完成此模組之後,程式就可以透過HttpClient來發起請求和接收資料,就像是在操作資料庫一樣。而不用先要安裝資料庫的Server。

首先,先來啟用HTTP服務,HttpClient是Angular透過HTTP與遠端伺服器通訊的機制,在app.module.ts來import此模組 HttpClientModule,再加入到@NgModule.imports 陣列中,程式碼如下:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { EmployeeDetailComponent } from './employee-detail/employee-detail.component';
import { EmployeeSalesListComponent } from './employee-sales-list/employee-sales-list.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
    EmployeeDetailComponent,
    EmployeeSalesListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

下回,就正式來安裝記憶體Web API(In-memory Web API)。


上一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(九)
下一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十一)
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言